<template>
  <div class="space-y-6">
    <!-- 页面标题 -->
    <div class="flex items-center justify-between">
      <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ t('settings.title') }}</h1>
      <button
        @click="resetAllSettings"
        class="btn btn-secondary btn-sm"
        :disabled="isResetting"
      >
        {{ isResetting ? t('settings.resetting') : t('settings.reset_all') }}
      </button>
    </div>

    <!-- 设置选项 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <!-- 外观设置 -->
      <div class="card">
        <div class="card-header">
          <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
            <Palette class="w-5 h-5 mr-2 text-blue-500" />
            {{ t('settings.appearance') }}
          </h2>
        </div>
        
        <div class="space-y-4">
          <!-- 主题设置 -->
          <div class="flex items-center justify-between">
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                {{ t('settings.theme_mode') }}
              </label>
              <p class="text-xs text-gray-500 dark:text-gray-400">
                {{ t('settings.theme_desc') }}
              </p>
            </div>
            <div class="flex items-center space-x-1">
              <button
                v-for="theme in themes"
                :key="theme.value"
                @click="settingsStore.setTheme(theme.value)"
                :class="[
                  'px-2 py-1.5 rounded-md text-xs font-medium transition-colors flex items-center',
                  settingsStore.settings.theme === theme.value
                    ? 'bg-blue-500 text-white dark:bg-orange-900/30 dark:text-orange-400'
                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-[#141414] dark:text-gray-300 dark:hover:bg-gray-600'
                ]"
              >
                <component :is="theme.icon" class="w-3 h-3 mr-1" />
                <span class="hidden sm:inline">{{ theme.label }}</span>
              </button>
            </div>
          </div>

          <!-- 语言设置 -->
          <div class="flex items-center justify-between">
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                {{ t('settings.language') }}
              </label>
              <p class="text-xs text-gray-500 dark:text-gray-400">
                {{ t('settings.language_desc') }}
              </p>
            </div>
            <div class="flex items-center space-x-1">
              <button
                v-for="lang in languages"
                :key="lang.value"
                @click="selectLanguage(lang.value)"
                :class="[
                  'px-2 py-1.5 rounded-md text-xs font-medium transition-colors flex items-center',
                  settingsStore.settings.language === lang.value
                    ? 'bg-blue-500 text-white dark:bg-orange-900/30 dark:text-orange-400'
                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-[#141414] dark:text-gray-300 dark:hover:bg-gray-600'
                ]"
              >
                <span>{{ lang.label }}</span>
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 系统设置 -->
      <div class="card">
        <div class="card-header">
          <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
            <Settings class="w-5 h-5 mr-2 text-green-500" />
            {{ t('settings.system_settings') }}
          </h2>
        </div>
        
        <div class="space-y-4">
          <!-- 开关设置 -->
          <div v-for="setting in toggleSettings" :key="setting.key" class="flex items-center justify-between">
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                {{ setting.label }}
              </label>
              <p class="text-xs text-gray-500 dark:text-gray-400">
                {{ setting.description }}
              </p>
            </div>
            <label class="relative inline-flex items-center cursor-pointer" :class="{ 'opacity-50 cursor-not-allowed': setting.disabled }">
              <input
                type="checkbox"
                :checked="settingsStore.settings[setting.key] as boolean"
                @change="updateToggleSetting(setting.key, $event)"
                class="sr-only peer"
                :disabled="setting.disabled"
              />
              <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-orange-800 rounded-full peer dark:bg-[#141414] peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 dark:peer-checked:bg-orange-500"></div>
            </label>
          </div>
        </div>
      </div>

      <!-- 性能设置 -->
      <div class="card">
        <div class="card-header">
          <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
            <Zap class="w-5 h-5 mr-2 text-yellow-500" />
            {{ t('settings.performance_settings') }}
          </h2>
        </div>
        
        <div class="space-y-4">
          <!-- 刷新间隔 -->
          <div class="flex items-center justify-between">
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                {{ t('settings.refresh_interval') }}
              </label>
              <p class="text-xs text-gray-500 dark:text-gray-400">
                {{ t('settings.refresh_interval_desc') }}
              </p>
            </div>
            <div class="flex items-center space-x-2">
              <input
                v-model.number="settingsStore.settings.refreshInterval"
                @change="updateRefreshInterval"
                type="range"
                min="500"
                max="5000"
                step="500"
                class="w-24 themed-slider"
              />
              <span class="text-sm text-gray-600 dark:text-gray-400 w-12">
                {{ settingsStore.settings.refreshInterval }}ms
              </span>
            </div>
          </div>

          <!-- 历史记录数量 -->
          <div class="flex items-center justify-between">
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                {{ t('settings.history_size') }}
              </label>
              <p class="text-xs text-gray-500 dark:text-gray-400">
                {{ t('settings.history_size_desc') }}
              </p>
            </div>
            <div class="flex items-center space-x-2">
              <input
                v-model.number="settingsStore.settings.maxHistorySize"
                @change="updateHistorySize"
                type="range"
                min="50"
                max="500"
                step="50"
                class="w-24 themed-slider"
              />
              <span class="text-sm text-gray-600 dark:text-gray-400 w-12">
                {{ settingsStore.settings.maxHistorySize }}
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- 关于软件 -->
      <div class="card">
        <div class="card-header">
          <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
            <Info class="w-5 h-5 mr-2 text-purple-500" />
            {{ t('settings.about') }}
          </h2>
        </div>
        
        <div class="space-y-4">
          <!-- 软件信息 -->
          <div class="text-center">
            <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-4">
              <Wifi class="w-8 h-8 text-white" />
            </div>
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
              {{ t('home.title') }}
            </h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">
              {{ t('settings.version') }} {{ appVersion }}
            </p>
          </div>

          <!-- 软件描述 -->
          <div class="text-sm text-gray-600 dark:text-gray-300 space-y-2">
            <p>
              <strong>{{ t('home.title') }}</strong> {{ t('settings.app_description') }}
            </p>
            <p>
              <strong>{{ t('settings.main_features') }}</strong>
            </p>
            <ul class="list-disc list-inside space-y-1 ml-4">
              <li>{{ t('settings.features.bandwidth_control') }}</li>
              <li>{{ t('settings.features.real_time_monitoring') }}</li>
              <li>{{ t('settings.features.detailed_stats') }}</li>
              <li>{{ t('settings.features.cross_platform') }}</li>
              <li>{{ t('settings.features.user_friendly') }}</li>
            </ul>
          </div>

          <!-- 技术栈 -->
          <div class="border-t pt-4">
            <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">
              {{ t('settings.tech_stack') }}
            </h4>
            <div class="flex flex-wrap gap-2">
                              <span v-for="tech in techStack" :key="tech" class="px-2 py-1 bg-gray-100 dark:bg-[#141414] text-gray-700 dark:text-gray-300 rounded text-xs">
                {{ tech }}
              </span>
            </div>
          </div>

          <!-- 开发者信息 -->
          <div class="border-t pt-4">
            <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">
              {{ t('settings.developer') }}
            </h4>
            <p class="text-sm text-gray-600 dark:text-gray-300">
              {{ t('settings.developer_name') }}
            </p>
            <p class="text-sm text-gray-600 dark:text-gray-300">
              {{ t('settings.open_source_address') }}
              <a @click="openLink('https://gitee.com/mingjianyeying/BandHot')" class="text-blue-500 hover:underline cursor-pointer">
                https://gitee.com/mingjianyeying/BandHot
              </a>
            </p>
            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
              {{ t('settings.open_source') }}
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 保存成功提示 -->
    <div
      v-if="showSaveMessage"
      class="fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg transition-all duration-300"
    >
      <CheckCircle class="w-4 h-4 inline mr-2" />
      {{ t('settings.settings_saved') }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { open } from '@tauri-apps/plugin-shell'
import { useSettingsStore, type Theme, type Language } from '@/stores/settings'
import { useI18n } from '@/composables/useI18n'
import {
  Palette,
  Settings,
  Zap,
  Info,
  Wifi,
  CheckCircle,
  Sun,
  Moon,
  Monitor
} from 'lucide-vue-next'

const settingsStore = useSettingsStore()
const { t } = useI18n()

// 响应式数据
const isResetting = ref(false)
const showSaveMessage = ref(false)

// 应用信息
const appVersion = ref('1.0.0')
const techStack = ref([
  'Vue 3', 'TypeScript', 'Tauri', 'Vite', 'Pinia', 'Tailwind CSS', 'Chart.js'
])

// 主题选项
const themes = computed(() => [
  { value: 'light' as Theme, label: t('theme.light'), icon: Sun },
  { value: 'dark' as Theme, label: t('theme.dark'), icon: Moon },
  { value: 'auto' as Theme, label: t('theme.auto'), icon: Monitor }
])

// 语言选项
const languages = computed<{ value: Language; label: string }[]>(() => [
  { value: 'zh-CN', label: t('language.zh-CN') },
  { value: 'en-US', label: t('language.en-US') }
])

// 开关设置
const isDev = import.meta.env.DEV

const toggleSettings = computed(() => [
  {
    key: 'autoStart' as keyof typeof settingsStore.settings,
    label: t('settings.auto_start'),
    description: isDev ? t('settings.auto_start_desc_dev') : t('settings.auto_start_desc'),
    disabled: isDev
  },
  {
    key: 'showNotifications' as keyof typeof settingsStore.settings,
    label: t('settings.show_notifications'),
    description: t('settings.show_notifications_desc'),
    disabled: false
  },
  {
    key: 'autoUpdate' as keyof typeof settingsStore.settings,
    label: t('settings.auto_update'),
    description: t('settings.auto_update_desc'),
    disabled: false
  },
  {
    key: 'minimizeToTray' as keyof typeof settingsStore.settings,
    label: t('settings.minimize_to_tray'),
    description: t('settings.minimize_to_tray_desc'),
    disabled: false
  },
  {
    key: 'startMinimized' as keyof typeof settingsStore.settings,
    label: t('settings.start_minimized'),
    description: t('settings.start_minimized_desc'),
    disabled: false
  },
  {
    key: 'enableSounds' as keyof typeof settingsStore.settings,
    label: t('settings.enable_sounds'),
    description: t('settings.enable_sounds_desc'),
    disabled: false
  }
])

// 方法
const selectLanguage = (lang: Language) => {
  settingsStore.setLanguage(lang)
  showSaveMessage.value = true
  setTimeout(() => {
    showSaveMessage.value = false
  }, 2000)
}

const updateToggleSetting = (key: keyof typeof settingsStore.settings, event: Event) => {
  const target = event.target as HTMLInputElement
  settingsStore.updateSettings({ [key]: target.checked })
  showSaveMessage.value = true
  setTimeout(() => {
    showSaveMessage.value = false
  }, 2000)
}

const updateRefreshInterval = () => {
  settingsStore.updateSettings({ refreshInterval: settingsStore.settings.refreshInterval })
  showSaveMessage.value = true
  setTimeout(() => {
    showSaveMessage.value = false
  }, 2000)
}

const updateHistorySize = () => {
  settingsStore.updateSettings({ maxHistorySize: settingsStore.settings.maxHistorySize })
  showSaveMessage.value = true
  setTimeout(() => {
    showSaveMessage.value = false
  }, 2000)
}

const openLink = (url: string) => {
  open(url)
}

const resetAllSettings = async () => {
  isResetting.value = true
  
  // 模拟重置过程
  await new Promise(resolve => setTimeout(resolve, 1000))
  
  settingsStore.resetSettings()
  isResetting.value = false
  showSaveMessage.value = true
  setTimeout(() => {
    showSaveMessage.value = false
  }, 2000)
}

onMounted(() => {
  // 初始化设置
  settingsStore.initialize()
})
</script>

<style scoped>
.themed-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background: #e5e7eb;
  border-radius: 5px;
  outline: none;
  opacity: 0.7;
  transition: opacity .2s;
}

.dark .themed-slider {
  background: #4b5563;
}

.themed-slider:hover {
  opacity: 1;
}

.themed-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #3b82f6;
  cursor: pointer;
  border-radius: 50%;
}

.dark .themed-slider::-webkit-slider-thumb {
  background: #f97316;
}

.themed-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #3b82f6;
  cursor: pointer;
  border-radius: 50%;
}

.dark .themed-slider::-moz-range-thumb {
  background: #f97316;
}
</style>